<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  动画
        @keyframes leftToRight {
            0%{
                transform: translate(-100px);
            }
            50%{
                transform: translate(-50px);
            }
            0%{
                transform: translate(0px);
            }
        } */
        /* .animation{
            animation: leftToRight 3s;
        } */

        /* 过度 */
        /* .transition{
            transition: 3s background-color ease;
        }
        .blue{
            background-color: blue;
        }
        .green{
            background-color: green;
        } */


        .transition{
            transition: 3s background-color ease;
        }
    </style>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // 过度  动画
    const app = Vue.createApp({
        data(){
            return{
                styleObj:{
                    background:'blue'
                }
            }
        },
        methods:{
            handleClick(){
                if(this.styleObj.background==='blue'){
                    this.styleObj.background='green'
                }else{
                    this.styleObj.background='blue'
                }
            }
        },
        template:`
        <div>
            <div class="transition" :style="styleObj">hello world</div>
            <button @click="handleClick">切换</button>
        </div>
        `
    })
    const vm = app.mount('#root')
</script>